<template>
  <div class="flex flex-wrap" style="padding-right: 16px;">
    <div
      v-for="(item, index) in dataList"
      :key="index"
      class="border-info mrb18"
      :style="index % 2 != 0 ? '' : 'margin-right: 18px;'"
      style="padding: 10px 20px;width: calc(50% - 9px); "
    >
      <div class="flex align-center">
        <div class="pdr5">
          <div class="text-center " style="width: 50px;">
            <el-tooltip placement="left">
              <div class="size16" slot="content">{{ item.name }}</div>
              <div>
                <img src="/fabu-admin/widgetimgs/yw.png" alt="" />
                <div class="text-normal size14" :title="item.name">
                  {{ item.name }}
                </div>
              </div>
            </el-tooltip>
          </div>
        </div>
        <div>
          <div class="flex flex-wrap color-gray lh35">
            <div
              class=""
              v-for="(rule, ruleIndex) in rules"
              :key="ruleIndex"
              style="width:33.33%"
            >
              <div class="text-left">
                {{ rule.title }}:<span class="color-primary">{{
                  item[rule.field]
                }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    dataList: {
      type: Array,
      default: () => {
        return [];
      }
    },
    listRule: {
      type: Array,
      default: () => {
        return [];
      }
    }
  },
  computed: {
    rules() {
      if (!this.listRule?.length) return [];
      return this.listRule.filter(e => {
        return e.title != "工程师姓名";
      });
    }
  },
  data() {
    return {};
  }
};
</script>
